<!DOCTYPE html>
<html>
<head>
	<title>游戏大厅</title>
	{% load static %}
	<link rel="stylesheet" type="text/css" href="{%static 'css/blog.css'%}">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script type="text/javascript" src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
	<script type="text/javascript" src="{% static 'js/jquery.cookie.js' %}"></script>
	<script type="text/javascript" src="{% static 'js/react_hall.js' %}"></script>
	<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<div style="position:absolute;left:calc(50% - 200px);width:500px;">
		<h1>{{welcome}}{{user}}</h1>
		<a class="blogurl" href="/logout/">退出登录</a>
		<div id="create_room" style="cursor:pointer">创建房间</div>
		<!--房间列表-->
		<div style="width:400px;height:600px;">
	    	<div class="list-group mx-auto">
	      		{% for room in rooms %}
		        	<button onclick="window.location.href='/room/?room={{room.room_id}}'" type="button" class="list-group-item list-group-item-action">{{room.name}}
		        		<span style="position:relative;top:4px;float:right;font-size:12px;color:grey">房间号:{{room.room_id}}</span>
		        		<span style="position:relative;top:4px;right:10px;float:right;font-size:12px;color:grey">{{room.member_num}}/{{room.member_max}}</span>
		        	</button>
	      		{% endfor %} 
	    	</div>
	  	</div>
	</div>

</body>
</html>